<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref } from "vue";

const mapKey = ref('cdb6b28cba2ff64d50314fc5897ec270')
const SecretKey = ref('b4f8c95733012c9d3a15231d00221576')
const mapContext = ref() as any

const mapInit = () => {
  // 设置地图秘钥
  window._AMapSecurityConfig = {
    securityJsCode: SecretKey.value,
  }
  // 初始化
  AMapLoader.load({
    key: mapKey.value,
    version: "2.0",
  }).then((AMap) => {
    // 获取地图实例
    mapContext.value = new AMap.Map("map-test");
  })
    .catch((e) => {
      console.log('err', e);
    });
}

onMounted(() => {
  mapInit()
})
</script>

<template>
  <div id="map-test" style="width: 100vw; height: 100vh"></div>
</template>

<style lang="scss" scoped></style>
